<template>
  <div class="category">
    <!-- nav导航 -->
    <nav-bar>
      <template v-slot:center>
        <span style="font-size: 0.16rem; color: #fff">分类</span>
      </template>
    </nav-bar>
    <!-- 主体部分 -->
    <div class="main">
      <!-- 侧边栏 -->
      <div class="leftmenu">
        <scroll class="my-scroll" ref="myScroll">
          <van-collapse v-model="activeNames" accordion>
            <van-collapse-item :title="item.name" :name="item.id" v-for="item in categories" :key="item.id">
              <van-sidebar v-model="activeKey" color="#42b983">
                <van-sidebar-item
                  :title="item.name"
                  v-for="item in item.children"
                  :key="item.id"
                  @click="sidebarItemClick(item.id)"
                />
              </van-sidebar>
            </van-collapse-item>
          </van-collapse>
        </scroll>
      </div>
      <div class="goodslist">
        <van-tabs v-model="active" color="#42b983" @click-tab="tabClick">
          <van-tab :title="item.title" v-for="item in titles" :key="item.key" class="tab-content" :name="item.key">
            <scroll
              class="my-scroll"
              @pullingUp="pullingUp"
              :pullUpLoad="true"
              ref="cardScroll"
              :probeType="3"
              @scroll="scroll"
            >
              <van-card
                num="1"
                lazy-load
                tag="标签"
                :price="item.price"
                desc="描述信息"
                :title="item.title"
                :thumb="item.cover_url"
                :origin-price="item.price"
                v-for="item in goodsData"
                :key="item.id"
                @click="toDetail(item)"
              />
            </scroll>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 全剧组件BackTop -->
    <back-top @backTop="backTop" v-show="isBackTopShow" />
  </div>
</template>

<script>
import { ref, toRefs, reactive, watchEffect, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import UseCategoryData from 'hooks/category/UseCategoryData'
import Scroll from 'components/common/scroll/Scroll.vue'
import useScroll from 'hooks/scroll/useScroll'
import { getCategoryGoodsList } from 'network/category'
export default {
  components: { Scroll },
  name: 'Category',
  setup() {
    let titles = reactive([
      { title: '销量排序', key: 'sales' },
      { title: '价格排序', key: 'price' },
      { title: '评论排序', key: 'comments_count' }
    ])
    // 生成路由实例
    const router = useRouter()
    // 获取myScroll
    let myScroll = ref(null)
    // 获取cardScroll
    let cardScroll = ref(null)
    useScroll(cardScroll, myScroll)
    // Tab标签页的选项
    let active = ref('sales')
    // 当前分类的id
    let categoryId = ref(0)
    // 侧边栏选中第一栏的值,默认为0
    let activeKey = ref(0)
    // 侧边栏选中第二栏的值,默认为0
    let activeNames = ref(0)
    // 当前页
    let page = ref(1)
    // category的数据
    let categoryData = UseCategoryData()
    // 控制返回顶部按钮的显示与隐藏
    let isBackTopShow = ref(false)
    // 定义页面用到的数据
    let goodsData = ref([])
    // 定义一个获取数据的方法
    async function getCategoryData(params) {
      const res = await getCategoryGoodsList(params)
      goodsData.value.push(...res.goods.data)
    }
    // 开始的时候请求一次
    getCategoryData({ category_id: categoryId.value, page: page.value, [active.value]: 1 })
    // tab栏点击事件
    function tabClick({ name: key }) {
      active.value = key
      // 重置页码
      page.value = 1
      // 重置页面数据
      goodsData.value = []
      getCategoryData({ category_id: categoryId.value, page: page.value, [active.value]: 1 })
    }
    // 侧边栏点击事件
    function sidebarItemClick(id) {
      categoryId.value = id
      // 重置页码
      page.value = 1
      // 重置页面数据
      goodsData.value = []
      getCategoryData({ category_id: categoryId.value, page: page.value, [active.value]: 1 })
    }
    // 滚动到底部事件
    function pullingUp() {
      ++page.value
      // 页码+1重新调用方法
      getCategoryData({ category_id: categoryId.value, page: page.value, [active.value]: 1 })
    }
    // 返回顶部事件
    function backTop() {
      cardScroll.value.scrollTo(0, 0, 1000)
    }
    // 监听页面滚动事件
    function scroll({ y }) {
      isBackTopShow.value = -y >= 600 ? true : false
    }

    // 跳转到详情页面
    function toDetail({ id }) {
      router.push({
        name: 'detail',
        params: {
          id
        }
      })
    }

    return {
      active,
      titles,
      activeKey,
      activeNames,
      categoryId,
      goodsData,
      isBackTopShow,
      cardScroll,
      tabClick,
      sidebarItemClick,
      pullingUp,
      toDetail,
      scroll,
      backTop,
      myScroll,
      ...toRefs(categoryData)
    }
  }
}
</script>

<style lang="scss" scoped>
.category {
  .main {
    display: flex;
    .leftmenu {
      height: 100px;
      flex: 1;
      position: relative;
      top: 0.44rem;
    }
    .goodslist {
      width: 70vw;
    }
  }
}
.my-scroll {
  height: calc(100vh - 0.44rem - 0.49rem - 0.44rem);
}

::v-deep(.van-sidebar-item) {
  padding: 0.1rem 0.04rem !important;
  background-color: var(--color-background);
  text-align: center;
}
::v-deep(.van-sidebar-item--select::before) {
  background-color: var(--color-tint);
}
::v-deep(.van-cell__title) {
  text-align: center;
}
</style>